<template>
    <div class="list_page_div">
        <el-menu default-active="1" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">全部({{applyData.all}})</el-menu-item>
            <el-menu-item index="2">审批中({{applyData.approval}})</el-menu-item>
            <el-menu-item index="3">已通过({{applyData.passed}})</el-menu-item>
            <el-menu-item index="4">已拒绝({{applyData.rejected}})</el-menu-item>
            <el-menu-item index="5">已撤回({{applyData.withdrawn}})</el-menu-item>
        </el-menu>
        <page-list :loading="loading" :table-config="tableConfig" :data-list="applyData.dataList" :height="height" show-index
                   show-page :total="total" :pageSize="param.pageSize" :currentPage="param.pageNum" @currentChange="handleCurrentChange"
                   show-operate operate-width="120px">
            <template #searchArea>
                <select-option v-model="param.flowableCode" placeholder="流程烦劳" select-width="200px" :list="flowTypeList"></select-option>
                <el-button type="primary" @click="searchList">查询</el-button>
                <el-button type="primary" @click="resetData">重置</el-button>
            </template>

            <template #item_flowFlag="scope">
                {{ $common.getDicName('flowFlag', scope.row.flowFlag) }}
            </template>

            <template #operateContent="scope">
                <el-button type="text" @click="detailData(scope.row.id)">查看</el-button>
                <el-popconfirm title="是否确定撤回当前数据？" @confirm="openMessage(scope.row.id)" v-if="powerList.indexOf('flowProcess:withdraw')>-1&&scope.row.flowFlag==1">
                    <el-button slot="reference" type="text">撤回</el-button>
                </el-popconfirm>
            </template>
        </page-list>
        <approve-detail :visible.sync="showDetail" :id="id" :disabled="disabled" @refreshList="searchList"></approve-detail>
    </div>
</template>

<script>
import PageList from "@/components/grid/pageList.vue";
import SelectOption from "@/components/select/selectOption.vue";
import ApproveDetail from "../detail/approveDetail.vue";
import ModelEdit from "../../flowable/model/compnent/modelEdit.vue";

export default {
    name: "applyList",
    components: {ModelEdit, ApproveDetail, SelectOption, PageList},
    data() {
        return {
            height: '500px',
            loading: false,
            showDetail: false,

            showRadio: '1',

            id: '',
            disabled: false,
            tableConfig: [
                {label: "流程类型", prop: "flowableName", width: 160},
                {label: "标题名称", prop: "newsTitle", minWidth: 240},
                {label: "申请时间", prop: "createTime", width: 200},
                {label: "记录状态", prop: "flowFlag", width: 100, slot: true},
            ],
            applyData: {
                all: 0,
                approval: 0,
                passed: 0,
                rejected: 0,
                withdrawn: 0,
                dataList: [],
            },
            total: 0,
            param: {
                flowableCode: '',
                dataType: 'all',
                field: 'create_time',
                order: 'desc',
                pageSize: 20,
                pageNum: 1,
            },
            flowTypeList: [],

            powerList: [],

            newsMessage: '',
        }
    },
    mounted() {
        this.getFlowTypeList();
        this.$nextTick(() => {
            this.powerList = this.$common.getPowerList("apply");
            this.height = (document.body.offsetHeight - 185) + "px";
        })
        this.searchList();
    },
    methods: {
        getFlowTypeList() {
            this.loading = true;
            this.$axios.post('/CHILD_CONFIG/baseFlowType/getAllList').then(res => {
                this.fiowTypeList = this.$common.getSelectList(res.data, "flowableName", "flowableCode");
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            })
        },
        handleCurrentChange(val) {
            this.param.pageNum = val;
            this.searchList();
        },
        resetData() {
            this.param.flowableCode = '';
            this.param.dataType = '';
            this.param.pageNum = 1;
            this.searchList();
        },
        searchList() {
            this.loading = true;
            this.param.selectType = this.showRadio;
            this.$axios.post("/CHILD_WORKFLOW/flowProcess/getApplyPageList", this.param).then(res => {
                this.applyData = res.data;
                if (this.showRadio == "1") {
                    this.total = this.applyData.all;
                } else if (this.showRadio == "2") {
                    this.total = this.applyData.approve;
                } else if (this.showRadio == "3") {
                    this.total = this.applyData.passed;
                } else if (this.showRadio == "4") {
                    this.total = this.applyData.rejected;
                } else if (this.showRadio == "5") {
                    this.total = this.applyData.withdrawn;
                }
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            })
        },
        handleSelect(key) {
            this.showRadio = key;
            this.searchList();
        },
        detailData(id) {
            this.id = id;
            this.disabled = false;
            this.showDetail = true;
        },
        withdrawData(id) {
            this.loading = true;
            this.$axios.post("/CHILD_WORKFLOW/flowProcess/withdraw", {
                id: id,
                newsMessage: this.newsMessage,
            }).then(() => {
                this.searchList();
                this.$message.success("撤回成功！");
            }).catch(() => {
                this.loading = false;
            })
        },
        openMessage(id) {
            this.$prompt('请输入撤回原因', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                this.newsMessage = value;
                this.withdrawData(id);
            }).catch(() => {});
        }
    }
}
</script>

<style scoped>

</style>